<!DOCTYPE html>
<html lang="en">
<%- include('../_head.ejs') %>
<%- include('../_style.ejs') %>
<%- include('../_nav.ejs') %>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/stackoverflow-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

<script>
  hljs.highlightAll();
</script>
<style>
  code {
    font-family: monospace !important;
  }
</style>

<%if(login){%>
  <script>
    function like(articleId){
      $.ajax({
        url:'/comments/like',
        type:'POST',
        data:{articleId:articleId},
        success:function(data){
          $('#likeBtn').html(data.likes+'&nbsp;Likes');
        }
      });
    }
  </script>
<%}%>

<body>
  <div class="container">
    <h1 class="mb-1 text-white"><%= article.title %></h1>
    <div class="mb-2" style="color:rgba(253,253,253,0.6)">
      <%= article.description %>
      <br/>
      <%= article.createdAt.toLocaleDateString() %> by <%= article.authorName %>
    </div>
    <a href="/" class="btn btn-rounded btn-primary">All Articles</a>
    <%if(login&&login_email===article.author){%>
    <a href="/articles/edit/<%= article.id %>" class="btn btn-info">Edit</a>
      <form action="/articles/<%= article.id %>?_method=DELETE" method="POST" class="d-inline">
        <button type="submit" class="btn btn-danger">Delete</button>
      </form>
    <%}%>
    <%if(login){%>
    <button type="button" id="likeBtn" onclick="like('<%=article.id%>')" class="btn btn-success"><%=likes%>&nbsp;Likes</button>
    <%}else{%>
      <button type="button" id="likeBtn" class="btn btn-success"><%=likes%>&nbsp;Likes</button>
    <%}%>
    <div style="color:rgb(253,253,253)">
      <%- article.sanitizedHtml %>
    </div>
    <br/><br/><br/>
    <%- include('commentBox.ejs')%>
  </div>
  <%- include('../_footer.ejs') %>
</body>
</html>